<template>
  <view class="container">
    <view class="header">
      <text class="title">脑筋急转弯小游戏</text>
      <text class="score">得分: {{ correctCount }}/{{ questions.length }}</text>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading" v-if="isLoading">
      <text>加载题目中...</text>
    </view>
    
    <!-- 题目卡片 -->
    <view class="question-card" v-else-if="!gameOver">
      <text class="question-number">第 {{ currentIndex + 1 }} 题</text>
      <text class="question-text">{{ currentQuestion.question }}</text>
      
      <input 
        class="answer-input" 
        v-model="userAnswer" 
        placeholder="请输入你的答案"
        @confirm="checkAnswer"
      />
      
      <button class="submit-btn" @tap="checkAnswer">提交答案</button>
    </view>
    
    <!-- 结果卡片 -->
    <view class="result-card" v-if="gameOver">
      <text class="result-title">游戏结束!</text>
      <text class="result-text">{{ correctCount >= 5 ? '恭喜你获胜了！' : '很遗憾，再接再厉！' }}</text>
      <text class="final-score">最终得分: {{ correctCount }}/{{ questions.length }}</text>
      <button class="restart-btn" @tap="restartGame">重新开始</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      questions: [],
      currentIndex: 0,
      userAnswer: '',
      correctCount: 0,
      gameOver: false,
      isLoading: true,
      baseUrl: 'http://localhost:5000' // API基础地址
    }
  },
  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex] || {}
    }
  },
  onLoad() {
    this.fetchQuestions()
  },
  methods: {
    async fetchQuestions() {
      try {
        this.isLoading = true
        const { statusCode, data } = await uni.request({
          url: `${this.baseUrl}/api/riddles/random/10`,
          method: 'GET',
          header: {
            'Content-Type': 'application/json'
          }
        })

        if (statusCode === 200 && Array.isArray(data)) {
          this.questions = data
        } else if (statusCode === 404) {
          throw new Error('没有找到题目')
        } else {
          throw new Error('获取题目失败')
        }
      } catch (error) {
        console.error('API请求错误:', error)
        uni.showModal({
          title: '错误',
          content: '获取题目失败，请检查网络连接后重试',
          showCancel: false
        })
      } finally {
        this.isLoading = false
      }
    },

    async checkAnswer() {
      if (!this.currentQuestion || !this.currentQuestion.answer) {
        return
      }

      const userAnswerTrimmed = this.userAnswer.trim()
      const correctAnswerTrimmed = this.currentQuestion.answer.trim()

      if (userAnswerTrimmed === correctAnswerTrimmed) {
        this.correctCount++
        await uni.showToast({
          title: '回答正确！',
          icon: 'success',
          duration: 1500
        })
      } else {
        await uni.showToast({
          title: `回答错误！正确答案是：${this.currentQuestion.answer}`,
          icon: 'none',
          duration: 2000
        })
      }

      // 等待提示显示完成后再进行下一题
      setTimeout(() => {
        this.userAnswer = ''
        this.currentIndex++

        if (this.currentIndex >= this.questions.length) {
          this.gameOver = true
        }
      }, 1500)
    },

    async restartGame() {
      this.currentIndex = 0
      this.correctCount = 0
      this.userAnswer = ''
      this.gameOver = false
      await this.fetchQuestions()
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.score {
  font-size: 18px;
  color: #666;
}

.question-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.question-number {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
  display: block;
}

.question-text {
  font-size: 20px;
  margin-bottom: 20px;
  display: block;
}

.answer-input {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 20px;
}

.submit-btn {
  background-color: #007AFF;
  color: #fff;
}

.result-card {
  text-align: center;
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.result-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  display: block;
}

.result-text {
  font-size: 20px;
  margin-bottom: 10px;
  display: block;
}

.final-score {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
  display: block;
}

.restart-btn {
  background-color: #007AFF;
  color: #fff;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #666;
}
</style>
